<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Finance Manager</title>
<meta content="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap css-->
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/customdefine.css" rel="stylesheet">
</head>
<body>
<div class="container">
	<%@ include file="../navbar.jsp" %>
	<div class="body-content">
		<span class="pageHeader">账本查看</span>
		<div class="row input-form">
			<form action="viewFinance.htm">
			<div class="span2">
				<select style="width:85px" name="year">
					<c:forEach var="year" items="${yearList}">
					<option ${year.yearValue == p_year?'selected':'' }>${year.yearValue}</option>
					</c:forEach>
				</select>
				年
			</div>
			<div class="span2">
				<select style="width:65px" name="month">
					<option ${p_month==0?'selected':''} value="0">01</option>
					<option ${p_month==1?'selected':''} value="1">02</option>
					<option ${p_month==2?'selected':''} value="2">03</option>
					<option ${p_month==3?'selected':''} value="3">04</option>
					<option ${p_month==4?'selected':''} value="4">05</option>
					<option ${p_month==5?'selected':''} value="5">06</option>
					<option ${p_month==6?'selected':''} value="6">07</option>
					<option ${p_month==7?'selected':''} value="7">08</option>
					<option ${p_month==8?'selected':''} value="8">09</option>
					<option ${p_month==9?'selected':''} value="9">10</option>
					<option ${p_month==10?'selected':''} value="10">11</option>
					<option ${p_month==11?'selected':''} value="11">12</option>
					<option ${p_month==12?'selected':''} value="12">全年</option>
				</select>
				月
			</div>
			<div class="span3">
				<label class="radio inline">
				  <input type="radio" name="type" id="optionsRadios1" value="detail" ${p_type=='detail'?'checked':''}>
				  明细
				</label>
				<label class="radio inline">
				  <input type="radio" name="type" id="optionsRadios2" value="all" ${p_type=='all'?'checked':''}>
				  汇总
				</label>
			</div>
			<div class="span2">
				<button type="submit" class="btn btn-primary">查询</button>
			</div>
			</form>
		</div>
		<div  id="financeItems">
		  <c:choose>
			<c:when test="${p_type=='all' }">
				<table class="table table-hover">
				<thead>
				<tr>
				<th>#</th><th>月份</th><th>收入</th><th>花销</th><th>结余</th>
				</tr>
				</thead>
				<tbody>
				<tr>
					<td>1</td><td>${p_year}-${p_month+1 }</td>
					<td>${statistic.incomeTotal }</td>
					<td>${statistic.spendTotal }</td>
					<td>${statistic.leftTotal }</td>
				</tr>
				</tbody>
				</table>
			</c:when>
			<c:otherwise>
			<table class="table table-hover">
			<thead>
			<tr>
			<th>#</th><th>日期</th><th>类型</th><th>类目</th><th>金额</th><th>地点</th><th>备注</th>
			</tr>
			</thead>
			<tbody>
			<c:forEach var="recentItem" items="${financeList }" varStatus="nowRow">
			<tr class="${recentItem.smallType.bigType.type_id==7?'success':'warning' }">
			<td>${nowRow.index + 1}</td>
			<td><fmt:formatDate value="${recentItem.financeDate}" pattern="yyyy-MM-dd"/></td>
			<td>${recentItem.smallType.bigType.type_name}</td>
			<td>${recentItem.smallType.type_name }</td>
			<td style="text-align:right;width:30px">${recentItem.money }</td>
			<td>${recentItem.location }</td>
			<td>${recentItem.remark }</td>
			</tr>
			</c:forEach>
			</tbody>
			</table>
		    </c:otherwise>
		  </c:choose>
		</div>
	</div>
</div>


<!-- script -->
	<script src="http://code.jquery.com/jquery.js"></script>
	<script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>